<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .roatestart {
      animation: rstart .5s linear forwards;
    }

    .roateend {
      animation: rend 1s linear forwards;
    }

    @keyframes rstart {
      0% {
        transform: rotateY(0deg);

      }

      100% {
        transform: rotateY(90deg);
      }
    }

    @keyframes rend {
      0% {
        transform: rotateY(-90deg);
      }

      100% {
        transform: rotateY(0deg);
      }
    }

    /* 专辑图片旋转 */
    @keyframes albumRotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    div {
      display: flex;
      align-items: center;
      justify-content: center;

    }

    button {
      margin-left: 50px;
    }

    img,
    #bg {

      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 1px solid red;
      transition: all .5s;
    }
  </style>
</head>







<body>
  <div>
    <img src="https://profile.csdnimg.cn/2/4/6/3_weixin_43851769" alt=""> <button>dianw</button>
  </div>
  <div id="bg"></div>
  <script>
    let src = 'https://profile.csdnimg.cn/2/4/6/3_weixin_43851769';
    let src2 = 'https://profile.csdnimg.cn/4/E/B/3_joyvonlee';

    let imgObj = document.querySelector('img');
    let bg = document.querySelector('#bg');
    let btn = document.querySelector('button');

    let isShow = true;
    btn.onclick = function () {




      setTimeout(() => {
        imgObj.className = 'roatestart'

      }, 500)

      setTimeout(() => {
        imgObj.src = src2
        imgObj.className = 'rotateend'

        console.log(9999);
      }, 1200)
    }
  </script>

</body>

</html>